<template>
 <!-- 统计数据-组件(自定义) -->
  <el-col :md="md" :xs="xs">
    <div class="stat" :style="cStyle">
      <slot>
        <slot name="label">
          <span v-if="isVertical" label :style="lebelStyle">{{label}}</span>
          <div v-else label :style="wLabel?'width:'+wLabel[0]:''">{{label}}</div>
        </slot>
        <slot name="value">
          <span v-if="isVertical" value>{{value}}</span>
          <div v-else value :style="wLabel?'width:'+wLabel[1]:''">{{value}}</div>
        </slot>
      </slot>
    </div>
  </el-col>

</template>

<script>
export default {
  name: 'cStat',
  props: {
    label: [String, Number],
    value: [String, Number],
    md: {
      type: Number,
      default: 2
    },
    xs: {
      type: Number,
      default: 12
    },
    vertical: { // 是否竖向-排列
      type: Boolean,
      default: true
    },
    wLabel: Array, // [L v] 宽度: 20px|20%
    color: String, // 字体颜色
    colorBorder: String, // 边框颜色
    colorCenter: String, // 中间颜色
    colorBg: String // 背景颜色
  },
  data() {
    return {

    }
  },
  computed: {
    cStyle() {
      let s = ''
      if (this.color) { s += `color: ${this.color};` }
      if (this.colorBorder) { s += `border-color: ${this.colorBorder};` }
      if (this.colorBg) { s += `background-color: ${this.colorBg};` }
      return s
    },
    lebelStyle() {
      let str = ''
      if (this.vertical) {
        str = this.colorCenter ? `borderBottomColor:${this.colorCenter};` : ''
      } else {
        str = this.colorCenter ? `borderRightColor:${this.colorCenter};` : ''
      }
      return str
    },
    isVertical() {
      return !(!this.vertical && window.innerWidth > 500)
    }
  },
  created() {
  },
  methods: {

  },
  filters: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.stat {
  border-radius: 2px;
  border: 1px solid #ebeef5;
  margin: 5px 0;
  span {
    display: block;
    text-align: center;
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #606266;
    font-size: 13px;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    &[label] {
      border-bottom: 1px solid #ebeef5;
      font-weight: bold;
    }
    &[value] {
      position: relative;
      padding: 10px 15px;
      line-height: 24px;
    }
  }
  div {
    display: inline-block;
    padding: 0 15px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    &[label] {
      border-right: 1px solid #ebeef5;
      font-weight: bold;
    }
    &[value] {
      position: relative;
      padding: 10px 15px;
      line-height: 24px;
    }
  }
}
</style>
